<template>
  <el-dialog
    v-model="dialogVisible"
    title="供应商选择器"
    width="90%"
    style="min-width: 800px; max-width: 500px"
    draggable
  >
    <div class="box">
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="供应商">
              <el-input
                size="large"
                :placeholder="'输入供应商名称、电话或手机'"
                v-model="requestParam.data.synthesis"
                autocomplete="off"
                @keyup.enter.native="getBodyData()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="负责人">
              <el-input
                size="large"
                :placeholder="'输入负责人'"
                v-model="requestParam.data.principalName"
                autocomplete="off"
                @keyup.enter.native="getBodyData()"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- 查询 -->
          <el-col :span="6">
            <el-form-item>
              <el-button
                size="large"
                type="primary"
                @click.prevent="getBodyData()"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="box">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>供应商选择器</span>
            <el-button
              style="float: right"
              size="mini"
              type="info"
              v-if="!isNoShowCancalBtn"
              @click.prevent="toNoSelect()"
              >取消选择</el-button
            >
          </div>
        </template>

        <el-table
          ref="table"
          @selection-change="selectionChange"
          :reserve-selection="true"
          v-loading="loading"
          element-loading-text="Loading..."
          :data="bodyData.content"
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          max-height="500px"
        >
          <el-table-column label="供应商名称" prop="name" width="200" />

          <el-table-column label="负责人" prop="principalName" width="200" />

          <el-table-column label="电话" prop="phone" width="200" />

          <el-table-column label="手机" prop="mobile" width="200" />

          <el-table-column label="邮箱" prop="email" width="200" />

          <el-table-column label="默认折扣" prop="discount" width="200">
            <template #default="{ row }">
              <span v-if="row.discount">{{ row.discount * 100 }}%</span>
              <span v-else>无</span>
            </template>
          </el-table-column>

          <el-table-column label="地址" prop="addressDetail" width="200" />

          <el-table-column label="银行账号" prop="bankAccount" width="200" />

          <el-table-column label="开户行" prop="bankName" width="200" />

          <el-table-column label="网址" prop="website" width="200" />

          <el-table-column label="备注" prop="remark" width="200" />

          <el-table-column fixed="right" label="" width="100">
            <template #default="scope">
              <el-button type="primary" @click.prevent="toSelect(scope.row)">
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="position: relative; height: 30px">
          <el-pagination
            @current-change="pageChange"
            style="
              position: absolute;
              left: 50%;
              top: 10px;
              transform: translateX(-50%);
            "
            layout="prev, pager, next"
            :page-size="requestParam.pageSize"
            :current-page="requestParam.pageNumber"
            :total="bodyData.totalElements"
          />
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineEmits } from "vue";
import $kt from "@/vueKantboot";
import { ElMessage, ElMessageBox } from "element-plus";

let table = ref();

let dialogVisible = ref(false);
let isNoShowCancalBtn = ref(false);

let open = (isNoShowCancalBtnParam: boolean) => {
  if (isNoShowCancalBtnParam) {
    isNoShowCancalBtn = isNoShowCancalBtnParam;
  }

  dialogVisible.value = true;
};

defineExpose({
  open,
});

let emits = defineEmits(["select"]);

let toSelect = (param: any) => {
  emits("select", param);
  dialogVisible.value = false;
};

let toNoSelect = () => {
  emits("select", {
    id: null,
    name: "未选择供应商",
  });
  dialogVisible.value = false;
};

let toSave = (param: any) => {
  dialogOfSave.value.open(param);
};

let requestParam = ref({
  data: {
    synthesis: "",
    principalName: "",
  },
  pageNumber: 1,
  pageSize: 30,
});

let isTop = ref(true);

let bodyData = ref({
  content: [
    {
      id: 477580912308229,
      addressCode: null,
      addressDetail: null,
      bankAccount: null,
      discount: null,
      email: null,
      gmtCreate: null,
      gmtModified: null,
      mobile: null,
      name: null,
      phone: null,
      principalName: "测试",
      remark: null,
      website: null,
      bankName: null,
      due: 0.0,
    },
  ],
  totalElements: 0,
});

let selection = ref([]);

let selectionChange = (val: any) => {
  selection.value = val;
};

let toEdit = (param: any) => {
  dialogOfSave.value.open(param);
};

let pageChange = (val: any) => {
  requestParam.value.pageNumber = val;
  getBodyData();
};

let toAddChildren = (param: any) => {
  dialogOfSave.value.open({
    id: "",
    name: "",
    parentId: param.id,
    fileIdOfImg: "",
  });
};

let loading = ref(true);

let getBodyData = () => {
  loading.value = true;
  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsSupplier/getBodyData",
      method: "post",
      data: requestParam.value,
    })
    .then((res) => {
      if (res.data.success) {
        bodyData.value = res.data.data;
      }
      loading.value = false;
    });
};

getBodyData();

let removeBatch = () => {
  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsSupplier/removeBatch",
      method: "post",
      data: selection.value,
    })
    .then((res) => {
      if (res.data.success) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getBodyData();
        return false;
      }
      ElMessage({
        message: res.data.errMsg,
        type: "error",
      });
    });
};

let toRemoveBatch = () => {
  if (selection.value.length == 0) {
    ElMessage({
      message: "请选择要删除的数据",
      type: "error",
    });
    return false;
  }

  // 询问是否删除
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 删除
      removeBatch();
    })
    .catch(() => {
      // 取消
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px 20px 0 20px;
}

.box-box {
  background-color: #fff;
  color: #fff;
  text-align: center;
  padding: 30px;
  border-radius: 5px;
}

.box-box:hover {
  // 变小
  transform: scale(0.95);
}

.box-box:active {
  // 变小
  transform: scale(0.9);
}
</style>
